<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像放置画布</title>
</head>
<body>
<img id="scream" width="224" height="162"
     src="../../bg.jpg" alt="The Scream">

<p>Canvas:</p>

<canvas id="myCanvas" width="344" height="270"
        style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img, 1, 1);
    };
</script>
</body>
</html>